<%--
  Created by IntelliJ IDEA.
  User: 缪林辉
  Date: 2024/1/15
  Time: 15:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSON格式请求</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function (){
            //给id="getJson"绑定点击事件
            $("#getJson").click(function (){
                var url=this.href;
                var args={"time":new Date()};//发送给服务器的数据,为了防止页面缓存
                $.post(
                    url,
                    args,
                    function (data){//data 就是返回的数据,是json格式
                        console.log("data=",data);
                    },
                    "json"
                );
                return false;//这里我们返回false,就不使用href默认机制进行跳转
            })

            //绑定按钮点击事件, 提交 json 数据
            //springmvc 可以在后将json 转成对象
            $("button[name='butt1']").click(function () {
                //目标：将userName和age封装成json字符串，发送给目标方法
                var userName = $("#userName").val()
                var age = $("#age").val()
                //发送一个ajax请求
                $.ajax({
                    url: "/springmvc/save2",
                    //将json对象转换成json字符串
                    data: JSON.stringify({"userName": userName, "age": age}),
                    type: "POST",
                    success: function (data) {
                        alert("返回的信息=" + JSON.stringify(data));
                    },
                    //下面这个contentType参数,是指定发送数据时的编码和格式
                    contentType: "application/json;charset=utf-8"
                });
            })
        })
    </script>
</head>
<body>
<h1>请求一个json数据</h1>
<a href="json/dog" id="getJson"> 点击获取json数据</a>

<h1>发出一个 json 数据</h1>
u:<input id="userName" type="text"><br/>
a:<input id="age" type="text"><br/>
<button name="butt1">添加用户</button>
</body>
</html>
